<template>
  <div>
    <header>
      <p>在线报名</p>
    </header>
    <section class="info">
      <form action>
        <p>
          <label for>选手名称</label>
          <input type="text" placeholder="请输入选手名称" @blur="playerName($event)" v-model="userName" />
        </p>
        <p>
          <label for>手机号</label>
          <input type="text" placeholder="请输入手机号" @blur="playerPhone($event)" v-model="userPhone" />
        </p>
        <p>
          <span>分组</span>
          <picker mode="selector" :range="campus" :value="index" @change="bindPickerChange">
            <div class="picker">{{campus[index]}}</div>
          </picker>
        </p>
        <div>
          <span>选手描述</span>
          <textarea
            v-model="userDescribe"
            name="MaxU"
            id="MaxU"
            cols="10"
            rows="5"
            placeholder="请输入选手描述"
          ></textarea>
        </div>
      </form>
    </section>
    <div class="chooseImg">
      <p>上传选手照片（1-3张）</p>
      <div class="chooseImgContent">
        <ul>
          <li @click="preview(index)" v-for="(item,index) in images" :index="index" :key="index">
            <img :src="item" alt mode="aspectFill" />
          </li>
        </ul>
        <div class="chooseImgBtn" @click="uploadPic" v-if="show">
          <img src="/static/images/addimg.png" alt />
        </div>
      </div>
    </div>
    <button @click="submitBtn" class="submitBtn" type="primary" form-type="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      campus: ["全部"],
      campusId: [""],
      userName: "",
      userPhone: "",
      userDescribe: "",
      index: 0,
      images: [],
      userInfo: "",
      groupId: "",
      show: true,
      base64: [],
      grouping: false
    };
  },
  components: {},
  methods: {
    getGroupData() {
      this.$fly
        .post("/groupList", {
          activityId: 1
        })
        .then(res => {
          for (var i = 0; i < res.data.data.groupList.length; i++) {
            this.campus.push(res.data.data.groupList[i].name);
            this.campusId.push(res.data.data.groupList[i].id);
          }
          this.userInfo = res.data.data.hdActivity.audit;
          console.log("23333", this.userInfo);
        })
        .catch(error => {
          console.log(error);
        });
    },
    bindPickerChange(e) {
      this.index = e.mp.detail.value;
      this.groupId = this.campusId[e.mp.detail.value];
      console.log(this.index);
      console.log(this.groupId);
    },
    uploadPic() {
      let that = this;
      wx.chooseImage({
        count: 1, //选择图片个数1-9
        sizeType: ["original", "compressed"], //original原图,compressed压缩图
        sourceType: ["album", "camera"], //album从相册选图,camera使用相机
        success(res) {
          // tempFilePath可以作为img标签的src属性显示图片
          let base64 = wx
            .getFileSystemManager()
            .readFileSync(res.tempFilePaths[0], "base64");
          res.tempFilePaths.forEach(v => {
            that.images.push(v);
            that.base64.push({ img: "data:image/png;base64," + base64 });
          });
          if (that.images.length < 3) {
            that.show = true;
          } else {
            wx.showModal({
              title: "提示",
              content: "照片最多上传3张！",
              success: function(res) {
                if (res.confirm) {
                  console.log("用户点击确定");
                } else {
                  console.log("用户点击取消");
                }
              }
            });
            that.show = false;
          }
        }
      });
    },
    preview(index) {
      let that = this;
      wx.showActionSheet({
        itemList: ["预览", "删除"],
        success: function(res) {
          if (res.tapIndex === 0) {
            //选择预览
            wx.previewImage({
              current: that.images[index], // 当前显示图片的http链接
              urls: that.images // 需要预览的图片http链接列表
            });
          } else {
            //选择删除
            that.images.splice(index, 1); //删除本地图片地址数组中位置内容
            // that.upImg.splice(index, 1); //删除提交给后台的图片数组中的位置内容
            that.$emit("delete", that.urls);
            if (that.urls.length < 3) {
              that.show = true;
            }
          }
        }
      });
    },
    playerName($even) {
      if (!/^[\u4E00-\u9FA5A-Za-z]+$/.test($even.mp.detail.value)) {
        wx.showToast({
          title: "名称输入有误",
          duration: 2000,
          icon: "none"
        });
        return false;
      }
    },
    playerPhone($even) {
      if (!/^1[34578]\d{9}$/.test($even.mp.detail.value)) {
        wx.showToast({
          title: "手机号码有误",
          duration: 2000,
          icon: "none"
        });
        return false;
      }
    },
    submitBtn() {
      let that = this;
      let phonetel = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      var extend1;
      if (this.userInfo == 1) {
        extend1 = 0;
      } else {
        extend1 = 1;
      }
      if (that.userName == "") {
        wx.showToast({
          title: "用户名不可以为空",
          icon: "none",
          duration: 1500
        });
      } else if (that.userPhone == "") {
        wx.showToast({
          title: "手机号不可为空",
          icon: "none",
          duration: 1500
        });
      } else if (!phonetel.test(that.userPhone)) {
        wx.showToast({
          title: "手机号有误",
          icon: "none",
          duration: 1500
        });
      } else if (that.base64 == "") {
        wx.showToast({
          title: "图片不可以为空",
          icon: "none",
          duration: 1500
        });
      } else {
        let newBase64 = JSON.stringify(that.base64);
        if (this.grouping) {
          // if(this.userInfo){
          this.$fly
            .post('/add', {
              activityId: 1,
              name: that.userName,
              tel: that.userPhone,
              describes: that.userDescribe,
              pics: newBase64,
              extend1: extend1,
              groupId: that.groupId
            })
            .then(res => {
              console.log(res.data, "提交报名");
              if (res.data.code == 0) {
                that.userName = "";
                that.userPhone = "";
                that.userDescribe = "";
                that.images = [];
                that.base64 = [];
                that.show = true;
                if (this.userInfo == 1) {
                  wx.showModal({
                    title: "提交成功",
                    content: "本活动报名须进行资料审核，请您耐心等待",
                    showCancel: false,
                    success: function(res) {
                      if (res.confirm) {
                        console.log("用户点击确定");
                        mpvue.reLaunch({
                          url: "../eventDetail/main"
                        });
                      } else {
                        console.log("用户点击取消");
                      }
                    }
                  });
                }
                if (this.userInfo == 0) {
                  wx.showModal({
                    title: "提示",
                    content: "报名成功",
                    showCancel: false,
                    // canCelcolor:"red",
                    success: function(res) {
                      if (res.confirm) {
                        console.log("用户点击确定");
                        mpvue.reLaunch({
                          url: "../playerDetail/main?id=" + this.id
                        });
                      } else {
                        console.log("用户点击取消");
                      }
                    }
                  });
                }
              } else {
                wx.showToast({
                  title: res.data.msg,
                  icon: "none",
                  duration: 1500
                });
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          this.$fly
            .post('/add', {
              activityId: 1,
              name:that.userName,
              tel: that.userPhone,
              describes: that.userDescribe,
              pics: newBase64,
              extend1: extend1,
              groupId: ""
            })
            .then(res => {
              if (res.data.code == 0) {
                that.userName = "";
                that.userPhone = "";
                that.userDescribe = "";
                that.images = [];
                that.base64 = [];
                that.show = true;
                wx.showToast({
                  title: "提交成功",
                  icon: "success",
                  duration: 1500
                });
                setTimeout(function() {
                  mpvue.reLaunch({
                    url: "../eventDetail/main"
                  });
                }, 1000);
              } else {
                wx.showToast({
                  title: res.data.msg,
                  icon: "none",
                  duration: 1500
                });
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
      }
    }
  },
  onLoad() {
    this.getGroupData();
    Object.assign(this.$data, this.$options.data());
    this.grouping = wx.getStorageSync("grouping");
  },
  created() {}
};
</script>

<style scoped>
header {
  font-size: 20px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  color: #45b39d;
  border-bottom: 2px solid #ecf0f1;
  margin: 0 20px;
}
.info {
  margin: 20px 30px;
}
form p {
  display: flex;
  height: 50px;
  align-items: center;
}
form p label,
form p span,
form div span {
  flex: 3;
  color: #bacbc8;
}
form p input,
form p ._picker {
  flex: 6;
  border: 1px solid #ecf0f1;
  height: 40px;
  background-color: #d8faf3;
  padding: 0 10px;
  font-size: 16px;
  line-height: 40px;
  color: #797d7f;
}
form div {
  display: flex;
}
form div textarea {
  flex: 6;
  padding: 0 10px;
  background-color: #d8faf3;
  color: #797d7f;
  font-size: 16px;
  padding: 10px;
  height: 100px;
}
.submitBtn {
  margin: 20px;
}
.chooseImg {
  color: #ccc;
  padding: 10px;
}
.chooseImgContent {
  display: flex;
  align-items: center;
}
.chooseImgContent ul {
  display: flex;
}
.chooseImgContent ul li {
  margin: 10px;
}
.chooseImgContent ul li img {
  width: 70px;
  height: 70px;
}
.chooseImgBtn {
  border: 2px solid #cdcdcd;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  margin: 10px;
  align-items: center;
}
.chooseImgBtn img {
  width: 40px;
  height: 40px;
}
</style>
